<template>
  <div class="app-container">

    <div class="tabInfo">
    <el-row :gutter="20">
      <!-- 部门数据 -->
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!-- 用户数据 -->
      <el-col :span="18" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
              style="width: 150px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery">
              <el-icon><Search /></el-icon>搜索
            </el-button>
            <el-button size="mini" @click="resetQuery">
              <el-icon><Refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          style="height: 400px"
          v-show="props.checkType === 'multiple'"
          ref="dataTable"
          v-loading="loading"
          :row-key="getRowKey"
          :data="userList"
          @row-click="clickRow"
          @selection-change="handleMultipleUserSelect"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50"
            align="center"
          />
          <el-table-column
            label="用户编号"
            align="center"
            key="userId"
            prop="userId"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="登录账号"
            align="center"
            key="userName"
            prop="userName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="用户姓名"
            align="center"
            key="nickName"
            prop="nickName"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
            v-if="columns[3].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号码"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
        </el-table>

        <el-table
          style="height: 500px"
          v-show="props.checkType === 'single'"
          v-loading="loading"
          :data="userList"
          @current-change="handleSingleUserSelect"
        >
          <el-table-column width="55" align="center">
            <template #default="scope">
              <el-radio v-model="radioSelected" :label="scope.row.userId">
                {{ "" }}
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column
            label="用户编号"
            align="center"
            key="userId"
            prop="userId"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="登录账号"
            align="center"
            key="userName"
            prop="userName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="用户姓名"
            align="center"
            key="nickName"
            prop="nickName"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
            v-if="columns[3].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号码"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
        </el-table>

        <pagination
          v-show="total > 10"
          :total="total"
          layout="prev, pager, next"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { listUser, deptTreeSelect } from "@/api/system/user";
import { StrUtil } from "@/utils/StrUtil";
import { defineProps } from "vue";
const emit = defineEmits(["handleUserSelect"]);

const props = defineProps({
  // 回显数据传值
  selectValues: {
    type: [Number, String, Array],
    default: null,
    required: false,
  },
  // 表格类型
  checkType: {
    type: String,
    default: "multiple",
    required: true,
  },
});

const queryForm = ref(null);
const tree = ref(null);
const dataTable = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  userName: undefined,
  phonenumber: undefined,
  status: undefined,
  deptId: undefined,
});
const deptName = ref("");
const deptOptions = ref([]);
const defaultProps = ref({
  children: "children",
  label: "label",
});
const userList = ref([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const radioSelected = ref(0);
const selectUserList = ref([]);

const columns = ref([
  { key: 0, label: `用户编号`, visible: true },
  { key: 1, label: `用户名称`, visible: true },
  { key: 2, label: `用户昵称`, visible: true },
  { key: 3, label: `部门`, visible: true },
  { key: 4, label: `手机号码`, visible: true },
]);

console.log(props.selectValues, "selectValuesselectValue内层");
watch(
  props.selectValues,
  (newVal) => {
    if (StrUtil.isNotBlank(newVal)) {
      console.log(typeof newVal === "number");
      console.log(Array.isArray(newVal));
      if (typeof newVal === "number") {
        radioSelected.value = newVal;
      } else if (Array.isArray(newVal)) {
        selectUserList.value = newVal;
      }
    }
  },
  { immediate: true }
);

watch(userList, (newVal) => {
  if (StrUtil.isNotBlank(newVal) && selectUserList.value.length > 0) {
    nextTick(() => {
      const dataTableInstance = dataTable.value;

      selectUserList.value.forEach((key) => {
        const row = newVal.find((item) => key == item.userId);
        console.log(newVal);
        if (row) {
          dataTableInstance.toggleRowSelection(row, true);
        }
      });
    });
  }
});

const getList = () => {
  loading.value = true;
  listUser(queryParams.value).then((response) => {
    userList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

const getDeptTree = () => {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
};

const getRowKey = (row) => {
  return row.userId;
};

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

const handleNodeClick = (data) => {
  queryParams.value.deptId = data.id;
  handleQuery();
};

const handleMultipleUserSelect = (selection) => {
  emit("handleUserSelect", selection);
};

const handleSingleUserSelect = (selection) => {
  radioSelected.value = selection.userId;
  emit("handleUserSelect", selection);
};

const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    userName: undefined,
    phonenumber: undefined,
    status: undefined,
    deptId: undefined,
  };
  deptName.value = "";
  tree.value.filter("");
  handleQuery();
};

onMounted(() => {
  getList();
  getDeptTree();
});
</script>

<style>
/* 隐藏radio展示的label及本身自带的样式 */
/* .el-radio__label {
  display: none;
} */

</style>
